<template>
  <div class="app">

    <HeaderContainer/>
    <nuxt-child></nuxt-child>
    <FooterContainer/>
  </div>
</template>

<script>
import HeaderContainer from '@/pages/common/HeaderContainer.vue'
import FooterContainer from '@/pages/common/FooterContainer.vue'

export default {
  head() {
    return {
      title: '首页' + ' - ' + this.$store.state.siteInfo.webName
    }
  },
  data () {
    return {
      loading: false,
      homeData: {

      }
    }
  },
  async asyncData(ts) {
    /*
    let response = await ts.$api.post('/app/tour/home/info',
      {}
    )
    if (response.code == 0) {
      return {homeData: response.data}
    } else {
      return {}
    }
    */
    return {}
  },
  mounted() {
    //this.getHomeData()
    this.$router.push('/index/home');
  },
  components: {
    HeaderContainer,
    FooterContainer
  },
  methods: {
    getHomeData() {
      this.loading = true
      this.$api.post('/web/page/index/info',
        {}
      ).then((response) => {
        if (response.meta.code == 200) {
          this.homeData = response.data
        } else {
          this.$Message.error(response.msg)
        }
        this.loading = false
      })
    },
    link(path, query={}) {
      console.log('path')
      console.log(path)
      this.$router.push({path:path, query:query})
    }
  }
}
</script>

<style lang="scss" scoped>

.container{
  width: 1200px;
  margin:0 auto;
}

.img-items{
  margin-top:20px;
  overflow:hidden;
  .img-item{
    float:left;
    margin-right:12px;
    height:450px;
    width: 286px;
    margin-bottom: 20px;
    box-shadow: 0px 0px 8px 0px rgba(174, 174, 185, 0.5);
    border-radius: 6px;
    overflow: hidden;
    .img{
      line-height:380px;
      height:380px;
      vertical-align:middle;
    }
    cursor: pointer;
    .info{
      padding:10px;
    }
    img{
      width: 100%;
      max-height:100%;
      line-height: 380px;
      vertical-align: middle;
    }
  }
}


.main-cars-container{
  margin:0 auto;
  margin-top:0px;
  .tip{
    width:100%;
    text-align:center;
    font-size:32px;
    position: relative;
    display: inline-block;
    margin-bottom: 30px;
    .title{
      border-bottom:1px solid #e6e6e6;
      padding-bottom:10px;
    }
  }
  .icons{
    .icon-item{
      cursor:pointer;
    }
    .icon{
      text-align:center;
      margin-bottom:20px;

    }
    .img{
      width:100%;
      height:300px;
      margin-bottom:10px;
      img{
        width:100%;
        height:100%;
      }
    }
    .alert{

    }
  }
}

.auto-intro{
  margin:0 auto;
  margin-top:0px;
  .tip{
    width:100%;
    text-align:center;
    font-size:32px;
    position: relative;
    display: inline-block;
    margin-bottom: 30px;
    .title{
      border-bottom:1px solid #e6e6e6;
      padding-bottom:10px;
    }
  }
  .icons{
    .icon{
      text-align:center;
    }
    .alert{

    }
  }
}

.relax-intro{
  margin:0 auto;
  margin-bottom:100px;
  margin-top:100px;
  .tip{
    width:100%;
    text-align:center;
    font-size:32px;
    position: relative;
    display: inline-block;
    margin-bottom: 30px;
    .title{
      border-bottom:1px solid #e6e6e6;
      padding-bottom:10px;
    }
  }
  .icons{
    .icon-item{
      border:1px solid #eee;
      overflow:hidden;
    }
    .img{
      width:100%;
      height:240px;
    }
    .alert{
      padding:20px;
      text-align:center;
    }
  }
}

.main-intro-container{
  background-color:#f9f9f9;
  padding:50px;
  .main-intro{
    margin-top:300px;
    margin:0 auto;
    margin-top:0px;
    margin-bottom:100px;
    .tip{
      width:100%;
      text-align:center;
      font-size:32px;
      position: relative;
      display: inline-block;
      margin-bottom: 30px;
      .title{
        border-bottom:1px solid #e6e6e6;
        padding-bottom:10px;
      }
    }
    .icons{
      .icon-item{
        overflow:hidden;
        height:80px;
        margin-bottom:10px;
      }
      .img{
        width:100%;
        height:100%;
      }
    }
  }
}

@media (max-width: 480px){

}

</style>
<style>

</style>
